<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Yunxiu-NEXT</title>
  <style>
    body,
    html {
      margin: 0;
      padding: 0
    }

    #loading-mask {
      position: fixed;
      width: 100%;
      height: 100vh;
      font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif
    }

    #loading-mask h2 {
      margin: 0;
      padding: 0;
      width: 450px;
      height: 100px;
      position: absolute;
      left: 50%;
      text-align: center;
      top: 45%;
      transform: translate(-50%, -50%);
      font-size: 64px;
      word-spacing: 0.2em;
      color: transparent;
      background-color: #1089ff;
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text
    }

    #loading-mask h2::after {
      content: 'Yunxiu-NEXT';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 5;
      background-image: linear-gradient(120deg, transparent 0%, transparent 6rem, white 11rem, transparent 11.15rem, transparent 15rem, rgba(255, 255, 255, 0.3) 20rem, transparent 25rem, transparent 27rem, rgba(255, 255, 255, 0.6) 32rem, white 33rem, rgba(255, 255, 255, 0.3) 33.15rem, transparent 38rem, transparent 40rem, rgba(255, 255, 255, 0.3) 45rem, transparent 50rem, transparent 100%);
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
      background-size: 150% 100%;
      background-repeat: no-repeat;
      animation: shine 3s infinite linear
    }

    @keyframes shine {
      0% {
        background-position: 50% 0
      }

      100% {
        background-position: -190% 0
      }
    }

    #loading-mask .wrapper {
      width: 200px;
      height: 60px;
      position: absolute;
      left: 50%;
      top: 60%;
      transform: translate(-50%, -50%)
    }

    #loading-mask .circle {
      width: 20px;
      height: 20px;
      position: absolute;
      border-radius: 50%;
      background-color: #1089ff;
      left: 15%;
      transform-origin: 50%;
      animation: circle .5s alternate infinite ease
    }

    @keyframes circle {
      0% {
        top: 60px;
        height: 5px;
        border-radius: 50px 50px 25px 25px;
        transform: scaleX(1.7)
      }

      40% {
        height: 20px;
        border-radius: 50%;
        transform: scaleX(1)
      }

      100% {
        top: 0
      }
    }

    #loading-mask .circle:nth-child(2) {
      left: 45%;
      animation-delay: .2s
    }

    #loading-mask .circle:nth-child(3) {
      left: auto;
      right: 15%;
      animation-delay: .3s
    }

    #loading-mask .shadow {
      width: 20px;
      height: 4px;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, .5);
      position: absolute;
      top: 62px;
      transform-origin: 50%;
      z-index: -1;
      left: 15%;
      filter: blur(1px);
      animation: shadow .5s alternate infinite ease
    }

    @keyframes shadow {
      0% {
        transform: scaleX(1.5)
      }

      40% {
        transform: scaleX(1);
        opacity: .7
      }

      100% {
        transform: scaleX(.2);
        opacity: .4
      }
    }

    #loading-mask .shadow:nth-child(4) {
      left: 45%;
      animation-delay: .2s
    }

    #loading-mask .shadow:nth-child(5) {
      left: auto;
      right: 15%;
      animation-delay: .3s
    }

    #loading-mask .wrapper span {
      position: absolute;
      top: 75px;
      font-size: 20px;
      letter-spacing: 12px;
      color: #1089ff;
      left: 15%;
      font-weight: 700
    }
  </style>
</head>

<body>
  <noscript>
    <strong>We're sorry but Yunxiu-NEXT doesn't work properly without JavaScript enabled. Please enable it to
      continue.</strong>
  </noscript>
  <div id="app" data-v-app="app">
    <div id="loading-mask">
      <h2>YUNXIU-NEXT</h2>
      <div class="wrapper">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="shadow"></div>
        <div class="shadow"></div>
        <div class="shadow"></div>
        <span>Loading</span>
      </div>
    </div>
  </div>
  <!-- built files will be auto injected -->
</body>

</html>